<template>
  <div class="play">
    <div :class="{rotate360:showAnimate}" class="img">
      <img :src="audio.cover" alt="" />
    </div>
    <div class="app"><aplayer :audio="audio" @playing="handleEvent()" @pause="hanedlePause()" :lrcType="3" ref="aplayer" /></div>
  </div>
</template>

<script>
// const { media } = this.$refs.aplayer;
export default {
  data() {
    return {
      showAnimate: false,
      audio: {
        name: "",
        artist: "",
        url: "",
        cover: '', // prettier-ignore
        lrc: "",
      },
    };
  },
  mounted() {
    var { id } = this.$route.query;
    this.$http.get(`/song/url?id=${id}`).then((res) => {
      // console.log(res.data.data[0].url);
      this.audio.url = res.data.data[0].url;
    });
    this.$http.get(`/song/detail?ids=${id}`).then((res) => {
      // console.log(res);
      this.audio.name = res.data.songs[0].al.name;
      this.audio.cover = res.data.songs[0].al.picUrl;
      this.audio.artist = res.data.songs[0].ar[0].name;
      this.audio.lrc = `http://cloud-music.pl-fe.cn/lyric?id=${id}`;
    });
  },
  methods: {
    handleEvent() {
      this.showAnimate = true
      
    },
    hanedlePause() {
      console.log(1);
      this.showAnimate = false
    }
  },
};
</script>

<style scoped>
.play {
  height: 400px;
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
}
.img {
  margin: 0 auto;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #333;
}
 img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
}
.app {
  width: 1200px;
  margin: 0 auto;
  position: fixed;
  /* left: 0; */
  bottom: 0;
}
@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
.rotate360 {
  animation: rotate360 3s linear infinite;
}
</style>